﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<WebClient.Models.ViewModels.GroupViewModel>" %>

<% var restaurant = Model.RestaurantModel.GetModel.LstObjModel[0]; %>

<img src="<%= Url.Action("ShowRestaurantImage", "Image", new { idrestaurant = restaurant.ID })%>" alt="<%= restaurant.Name %>" height="50" width="250" border="0" /><br />
<font style="color: #FF0000;"><%= restaurant.Name %></font><br />
<font style="font-size: 11px;">
    <%= restaurant.Address%><br />
    <% 
        var district = Model.AllDistrictModel.GetModel.LstObjModel.FirstOrDefault(n => n.ID == restaurant.IDDistrict);
        var city = Model.AllCityModel.GetModel.LstObjModel.FirstOrDefault(n => n.ID == district.IDCity); 
    %>
    <%= district.Name %>, <%= city.Name %>
</font>
<br />
<div id="div_float" style="position: absolute; width: 250px;">
    <div style="width: 250px; text-align: right;">
        <a href="#" onclick="hideBox('div_float'); return false;" style="text-decoration: none; font-style: italic; color:#333; font-size: 11px;">Fix to top&nbsp;<img width="14" height="16" alt="" src="../../Content/Images/Home/pushpin.jpg" style="margin-bottom: -4px;"></a>
    </div>
    <div id="div_cart">
        <!-- Start - put your content here --->
            <table border="0" width="100%" cellspacing="0" cellpadding="0" style="background:#fff; font-size:11px; border: 1px #DBDBDB solid;">
                <tr>
                    <td colspan="4"; style="background-color: #F3F3F3; color: #FF0000; font-size: 15px; padding-left: 4px;">
                        <b>Your Order</b> 
                    </td>
                </tr>
                <% 
                    var cartIsEmpty = true;
                    if (Model.ShoppingCartModel != null && Model.ShoppingCartModel.CartItems != null && Model.ShoppingCartModel.CartItems.Count > 0)
                    {
                        cartIsEmpty = false;
                    } 
                %>
                <% if (cartIsEmpty)
                    { %>
                    <tr>
                        <td>
                            <br /><center>&nbsp;Your cart is empty!</center><br /><br />
                        </td>
                    </tr>
                <% }
                    else
                    { %>
                    <tr style="border-top: 1px dotted #ddd;">
                        <td colspan="4" style="height:5px;"></td>
                    </tr>
                    <% for (int i = 0; i < Model.ShoppingCartModel.CartItems.Count; i++ )
                        { %>
                        <tr id="row-<%= Model.ShoppingCartModel.CartItems[i].RecordId %>"> 
                            <td style="padding-left: 4px;">
                                <%
                                    var food = Model.AllFoodModel.GetModel.LstObjModel.FirstOrDefault(n => n.ID == Model.ShoppingCartModel.CartItems[i].FoodID);
                                    %>
                                <%= i+1 %> - <%= food.Name%>
                            </td>
                            <td style="width:20px; text-align:center; padding-left: 5px;">
                                <script type="text/javascript">
                                    function ReCalcOrder(foodid) {
                                        var num = document.getElementsByName("NumFood" + foodid).item(0);
                                        //alert("../Home/AddToCart?idrestaurant=<%= Model.RestaurantModel.GetModel.LstObjModel[0].ID %>&id=" + foodid + "&num=" + num.value);
                                        window.location.href = "../Home/AddToCart?idrestaurant=<%= Model.RestaurantModel.GetModel.LstObjModel[0].ID %>&id=" + foodid + "&num=" + num.value;
                                    }
                                </script>
                                <input type="text" name="NumFood<%= food.ID %>" id="item-count-<%= Model.ShoppingCartModel.CartItems[i].RecordId %>" value="<%= Model.ShoppingCartModel.CartItems[i].Count %>" style="width:15px;font-size:10px;text-align:center;" maxlength="2" onkeyup='ReCalcOrder(<%= food.ID %>);'>
                            </td>
                            <td style="width:70px;text-align:right;padding-right:15px;"><%= food.Price %> USD</td>
                            <td style="width:12px;">
                                <a href="#" title="Remove from cart" class="RemoveLink" data-id="<%= Model.ShoppingCartModel.CartItems[i].RecordId %>">
                                    <img src="../../Content/Images/Home/delete.gif" alt="Remove From Cart" border="0" />
                                </a>
                            </td>
                        </tr>
                    <% } %>
                    <tr style="border-top: 1px dotted #ddd;">
                        <td style="padding-left: 4px; padding-top: 15px;">Total amount</td>
                        <td id="cart-total" colspan="2" style="text-align:right;padding-right:15px;font-weight:bold;  padding-top: 15px;">
                            <%= Model.ShoppingCartModel.CartTotal %> USD
                        </td>
                        <td style="padding-top: 15px;">
                            <a href="#"  onclick='xajax_delCart("all"); return false;' title="Empty Cart">
                                <img src="../../Content/Images/Home/delete.gif" alt="Empty Cart" border="0" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="height:10px;"></td>
                    </tr>
                    <tr>
                        <td colspan="4" align="center">
                            <script type="text/javascript">
                                function checkingOrder() {
                                    var total = <%= Model.ShoppingCartModel.CartTotal %>;
                                    if(total > 200){
                                        alert("Because the total of order is more than 100 USD, so you have to pay previous 10 percent on total value of order");
                                    }
                                    return true;
                                }
	                        </script>
                            <% using (Html.BeginForm("Approve", "Home", FormMethod.Post, new { onsubmit = "return checkingOrder();" }))
                                { %>
                                <p style="text-align:center; margin-bottom: 5px;">
                                    <input type="hidden" name="txtRestaurant" value="<%= restaurant.ID %>" />
                                    <input type="submit" name="sbt" id="sbt" value="Continue to checkout" style="background-image: url(../../Content/Images/Home/bgbutton.jpg); color: #FFFFFF; font-size: 16px; font-weight: bold; border: 1px #DBDBDB solid; height: 30px;" />
                                </p>
                            <% } %>
                        </td>
                    </tr>
                <% } %>
            </table><!-- End   - put your content here --->
    </div>
</div>
<script type="text/javascript">
    $.fn.menuFloater = function (options) {
        var opts = $.extend({ startFrom: 0, offsetY: 0, attach: '', duration: 50 }, options);
        // opts.offsetY
        var $obj = this;
        $obj.css({ position: 'absolute' /*, opacity: opts.opacity */ });

        /* get the bottom position of the parent element */
        var parentBottomPoint = $obj.parent().offset().top + $obj.parent().height();

        $(window).scroll(function () {

            $obj.stop(); // stop all calculations on scroll event
            //	console.log($(document).scrollTop() + " : " + $obj.offset().top);

            /* get to bottom position of the floating element */
            var isAnimated = true;
            var objTop = $obj.offset().top;
            var objBottomPoint = objTop + $obj.outerHeight();

            if (($(document).scrollTop() > opts.startFrom || (objTop - $(document).scrollTop()) > opts.startFrom) && ($obj.outerHeight() < $(window).height())) {
                var adjust;
                ($(document).scrollTop() < opts.startFrom) ? adjust = opts.offsetY : adjust = -opts.startFrom + opts.offsetY;
                $obj.animate({ top: ($(document).scrollTop() + adjust) }, opts.duration, function () { isAnimated = false });
            }
            else {
                $obj.stop();
            }
        });

    };

    $('#div_float').menuFloater({ duration: 700, opacity: 1, offsetY: 290, startFrom: 200 });
    </script>